<template>
	<view>
		<view>
			<map style="width: 750rpx;height: 340rpx;" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="gotoDH()" @callouttap="gotoDH()"></map>
		</view>
		<view style="height: 172rpx;width: 750rpx;background-color: #FFFFFF;">
			<view style="">
				<view style="float: left;width: 550rpx;">
					<view style="font-size: 40rpx;margin-left:40rpx ;margin-top: 34rpx;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;">{{name}}</view>
					<view style="color: #666666;font-size: 32rpx;margin-left:40rpx ;margin-top: 10rpx;overflow:hidden;white-space:nowrap;text-overflow: ellipsis;">{{address}}</view>
				</view>	
				<view style="float: right;margin-right: 40rpx;width: 120rpx;">
					<view style="display: flex;flex-direction: row;justify-content: center;"><image src="../../static/coordinate.png" style="width: 52rpx;height: 76rpx;margin-top: 18rpx;"></image></view>
					<view style="font-size: 40rpx;color: #FB9A17;display: flex;flex-direction: row;justify-content: center;">{{(distance/1000).toFixed(2)}}km</view>
				</view>	
			</view>
		</view>
		<view style="width: 750rpx;height: 20rpx;background-color: #F5F5F8;"></view>
		<view style="width: 750rpx;height: 400rpx;">
			<view style="display: flex;">
				<view style="height: 32rpx;width: 6rpx;background-color: #388CFE;margin-left: 40rpx;margin-top:42rpx ;border-radius: 3rpx;"></view>
				<view style="margin-left: 10rpx;color: #388CFE;font-size: 36rpx;line-height: 36rpx;margin-top: 40rpx;">场所基本信息</view>
			</view>
			<view style="margin-left: 50rpx;margin-top: 40rpx;height: 286rpx;border-bottom: 2rpx solid #E5E5E5;">
				<view class="text">级别：{{grade}}</view>
				<view class="text1">场所面积：{{seconddata.floorSpace}}平方米</view>
				<view class="text1">容纳人数：{{seconddata.peopleScale}}人</view>
				<view class="text1">联系人：{{seconddata.corporation}}</view>
				<view style="color: #666666;font-size: 32rpx;line-height: 32rpx;margin-top: 26rpx;">联系电话：{{seconddata.corporationMobile}}</view>
				<view></view>
			</view>
		</view>
		<view>
			<view style="display: flex;">
				<view style="height: 32rpx;width: 6rpx;background-color: #388CFE;margin-left: 40rpx;margin-top:42rpx ;border-radius: 3rpx;"></view>
				<view style="margin-left: 10rpx;color: #388CFE;font-size: 36rpx;line-height: 36rpx;margin-top: 40rpx;">场所动态记录</view>
			</view>
		</view>
		<view style="margin-top: 40rpx;">
			<view style="width:710rpx ;height: 164rpx;margin-left: 40rpx;"  v-for="(item,index) in list" :key="index">
				<view style="display: flex;">	
					<view style="width: 20rpx;height: 20rpx;border-radius: 90rpx;background-color: #FF952C;margin-top: 4rpx;"></view>
					<view style="font-size: 28rpx;line-height: 28rpx;margin-left:20rpx ;color: #666666;">{{item.createTime}}</view>
				</view>
				<view >
					<view style="font-size: 36rpx;line-height: 36rpx;margin-left: 40rpx;margin-top: 22rpx;float: left;">{{item.userName}}提供了{{item.type | filterDis}}记录</view>
					<view style="float: right;margin-right: 40rpx;color: #388CFE;margin-top:18rpx ;font-size: 36rpx;line-height: 36rpx;" @click="gotoCK(item.id)">></view>
					<view style="float: right;margin-right: 8rpx;color: #388CFE;font-size: 32rpx;line-height: 32rpx;margin-top: 22rpx;" @click="gotoCK(item.id)">查看</view>
				</view>
				<view style="width: 2rpx;height: 144rpx;border-left: 2rpx dashed #FF952C;margin-left: 9rpx;" v-if="index!==list.length-1 && list.length !==1"></view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		filters:{
			filterDis(e){
				let Recd = e
				if(e==1){
					return '巡查'
				}
				else{
					return '督查'
				}
			}
		},
		data() {
			return {
				title: 'map',
				latitude: '',
				longitude: '',
				name:'',
				address:'',
				id:'',
				distance:'',
				grade:'',
				seconddata:[],
				covers: [{
					id:0,
					latitude:'',
					longitude:'',
					// iconPath:'./../../static/coordinate@3x.png',
					iconPath:'./../../static/coordinate@3x.png',
					width:28,
					height:40,
					anchor:{x: .5, y: .3},
					callout: {
						content: '',
						fontSize:16,
						padding:8,
						color:'#666666',
						borderRadius:8,
						display:'ALWAYS'
					} 
				}],
				icon:false,
				list:[]
			}
		},
		methods: {
			gotoDH(){
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					name:this.name,
					address:this.address,
					success: function () {
						console.log('success');
					}
				});
			},
			// async getLocation(){
			// 	this.$myRequest({
			// 		url:`/project_flood/v1/owner_flood/detail/${this.id}`,
			// 		data:{},
			// 	}).then((res)=>{
					
			// 		this.covers[0].latitude=res.data.data.y;
			// 		this.covers[0].longitude=res.data.data.x;
			// 		console.log(this.longitude);
			// 		this.latitude=res.data.data.y;
			// 		this.longitude=res.data.data.x;
			// 		this.covers[0].callout.content=res.data.data.name;
			// 		this.name=res.data.data.name;
			// 		this.address=res.data.data.address;
			// 	})
			// },
			gotoCK(id){
				uni.navigateTo({
					url:`../xuncha/recordXQ?id=${id}`
				})
			},
			async getMes(){
				this.$myRequest({
					url:'/project_flood/v1/owner_flood/detail',
					data:{"id":this.id,"point":this.lngs+","+this.lats}
				}).then((res)=>{
					console.log(res);
					this.covers[0].latitude=res.data.data.y;
					this.covers[0].longitude=res.data.data.x;
					console.log(this.longitude);
					this.latitude=res.data.data.y;
					this.longitude=res.data.data.x;
					this.covers[0].callout.content=res.data.data.name;
					this.name=res.data.data.name;
					this.address=res.data.data.address;
					this.distance=res.data.data.distance;
					this.grade=res.data.data.grade;
					this.seconddata=res.data.data;
				})
			},
			async getRcd(){
				this.$myRequest({
					url:'/project_flood/v1/check/anwser/flood/list',
					data:{'ownerId':this.id}
				}).then((res)=>{
					console.log(res);
					this.list=res.data.data
				})
			}
		},
		onLoad(options) {
			try {
			    const X = uni.getStorageSync('lng');
				this.lngs=X;
			    if (X) {
			        // console.log(X);
			    }
			} catch (e) {
			    // error
			}
			try {
			    const Y = uni.getStorageSync('lat');
				this.lats=Y
			    if (Y) {
			        // console.log(Y);
			    }
			} catch (e) {
			    // error
			};
			// this.getLocation();
			console.log(options);
			this.id=options.id;
			this.getMes();
			this.getRcd();
		}
	}
</script>

<style>
.text{
	color: #666666;
	font-size: 32rpx;
	line-height: 32rpx;
},
.text1{
	color: #666666;
	font-size: 32rpx;
	line-height: 32rpx;
	margin-top: 20rpx;
}
</style>
